<template>
  <div>
    <el-dialog :title="formData.id ? '编辑': '新增'" :visible.sync="showFlag" :center="true">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="权限值" prop="permissionValue" label-width="120px">
          <el-input v-model="formData.permissionValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限名称" prop="permissionName" label-width="120px">
          <el-input v-model="formData.permissionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目录标志" prop="catalogFlag" label-width="120px">
          <el-switch v-model="formData.catalogFlag"></el-switch>
        </el-form-item>
        <el-form-item label="父id" prop="parentId" label-width="120px">
          <el-input v-model="formData.parentId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getApi, saveApi} from '@/api/sys/PermissionApi'
  import {
    elementVerifyEmail,
    elementVerifyPhone,
    elementVerifyPositiveDecimal,
    elementVerifyPositiveInteger
  } from '@/util/elementVerifyUtil'
  import messageUtil from "@/util/messageUtil"

  export default {
    name: "edit",
    props: {
      // 是否显示
      showFlag: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: null
      }
    },

    data() {
      return {
        // 表单数据
        formData: {
          // 权限值
          permissionValue: '',
          // 权限名称
          permissionName: '',
          // 目录标志
          catalogFlag: true,
          // 父id
          parentId: null,
        },
        // 校验规则
        rules: {
          permissionValue: [{required: true, message: '请输入权限值', trigger: 'blur'}],
          permissionName: [{required: true, message: '请输入权限名称', trigger: 'blur'}],
          catalogFlag: [{required: true, message: '请选择目录标志', trigger: 'change'}],
          parentId: [{
            required: true, validator: (rule, value, callback) => {
              elementVerifyPositiveInteger(rule, value, callback, "父id", 150)
            }, trigger: 'change'
          }],
        }
      }
    },

    methods: {
      // 提交表单
      submit() {
        // 设置id
        this.formData.id = this.id
        // 校验表单数据
        this.$refs['form'].validate((valid) => {
          // 校验通过
          if (valid) {
            // 保存
            saveApi(this.formData).then((res) => {
              if (res.success) {
                // 关闭表单
                this.closeForm()
              } else {
                // 展示错误消息
                messageUtil.error(res, this)
              }
            })
          }
        })
      },


      // 关闭表单
      closeForm() {
        // 触发 reloadTable 事件   让父组件重新加载table数据
        this.$emit('reloadTable')

        // 触发changeForm 事件    让父组件关闭 本表单
        this.$emit('changeForm')

        // 重置表单
        this.$refs['form'].resetFields()
      },

      // 查询详情
      getDetail() {
        getApi(this.id).then((res) => {
          if (res.success) {
            this.formData = res.data
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
    // 监控数据
    watch: {
      // 监控 id值的变化
      id(newval, val) {
        // 打开表单 并且 有传入id
        if (this.showFlag && newval) {
          // 查询详情
          this.getDetail()
        }
      }
    }
  }
</script>

<style scoped>

</style>

